<template>
    <div class="main-content">
        <echartsLayout :formState='formState' :dataListState='dataListState' :eCharts1State='eCharts1State' :eCharts2State='eCharts2State' 
        :eCharts3State='eCharts3State' :chartsListState='chartsListState' :tableState='tableState'>
            <div slot="form">
                <el-form :model="query" ref="query" label-width="40px" label-position="right">
                    <el-row :gutter="41">
                        <el-col :span="7">
                            <el-form-item label="月份">
                                <el-date-picker v-model="query.month" :clearable='false' :editable="false" :picker-options="pickerOptions" type="month" placeholder="请选择月份" style="width:100%"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2">
                            <div class="top-line">
                                <el-button type="primary" class="btn-common" @click="submit">查询</el-button>
                            </div>
                        </el-col>
                    </el-row> 
                </el-form>
            </div> 
            <div slot="eCharts1" >
                <div class="charts-title">提分汇总数据</div>
                <div class="charts-display" v-loading='chartLoading'>
                    <trendChart width='100%' height='100%' id="trendChart" :option='trendChartOption'></trendChart>
                </div>
            </div>
        </echartsLayout>
    </div>
</template>

<script>
    import moment from 'moment';
    import trendChart from 'components/Charts/trendChart';
    import echartsLayout from 'components/TableLayout/echartsLayout'; 
    import { countMetionInfo } from 'api/manageAnalysis';
    export default{
        name: 'dataAnalys',
        components: {trendChart, echartsLayout},
        data() {
            return {
                chartLoading: false,
                formState: false,
                dataListState: true,
                eCharts1State: false,
                eCharts2State: true,
                eCharts3State: true,
                chartsListState: true,
                tableState: true,
                query: {
                    month: new Date()
                },
                trendChartOption: null,
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                }
            }
        },
        created() {
            this.trendChart();
        },
        methods: {
            submit() {
                this.trendChart();
            },

            // 提分汇总数据
            trendChart() {
                let timeRange = this.query.month?moment(new Date(this.query.month)).format('YYYY-MM'):moment(new Date()).format('YYYY-MM');
                this.chartLoading = true;
                countMetionInfo(timeRange).then(res => {
                    this.chartLoading = false;
                    this.getChartData(res.data.content);
                }).catch(() => {
                    this.chartLoading = false;
                });
            },
            getChartData(dataList) {
                let totalList = []; // 总人数
                let parentList = []; // 家长
                let studentList = []; // 学生
                totalList[0] = dataList.userNumber;
                totalList[1] = dataList.loyaltyUserNumber;
                parentList[0] = dataList.parentNumber;
                parentList[1] = dataList.lostUserNumber;
                studentList[0] = dataList.studentNumber;
                studentList[1] = dataList.uninstallUserNumber;

                this.trendChartOption = {
                    color: ['#2EC7C9', '#5AB1EF', '#B6A2DE'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'line'
                        }
                    },
                    legend: {
                        data: ['总人数（次数）', '家长', '学生']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: ['提分人数', '提分次数']
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    series: [{
                        name: '总人数（次数）',
                        type: 'bar',
                        data: totalList
                    }, { 
                        name: '家长',
                        type: 'bar',
                        data: parentList
                    }, { 
                        name: '学生',
                        type: 'bar',
                        data: studentList
                    }]
                    
                };
            }
        }
    }
</script>
<style lang="scss" scoped>
    .main-content {
        position: relative;
        padding: 20px 20px 10px;
        width: 1400px;
        margin: 0 auto;
    }
</style>                     